<template>
  <section
    class=""
    @click="handleShowGuidePop()"
  >
    <div class="c-hh72 invite-group-bg c-p c-pt26">
      <img
        style="width: 1rem; height: 1rem ;left: 10%;top: 0.4rem;"
        src="https://kposshzcdn.ckjr001.com/admin/material/25_material_admin/image/img2/fans-group-star.png"
        class="fans-group-star1 c-pa"
        alt=""
      >
      <img
        style="width: 1rem; height: 1rem ;left: 35%;top: 1rem;"
        src="https://kposshzcdn.ckjr001.com/admin/material/25_material_admin/image/img2/fans-group-star.png"
        class="fans-group-star2 c-pa"
        alt=""
      >
      <img
        style="width: 1rem; height: 1rem ;left: 65%;top: 0.5rem;"
        src="https://kposshzcdn.ckjr001.com/admin/material/25_material_admin/image/img2/fans-group-star.png"
        class="fans-group-star3 c-pa"
        alt=""
      >
      <img
        style="width: 1rem; height: 1rem ;left: 80%;top: 0.1rem;"
        src="https://kposshzcdn.ckjr001.com/admin/material/25_material_admin/image/img2/fans-group-star.png"
        class="fans-group-star4 c-pa"
        alt=""
      >
      <div class="fans-light-box c-w100 c-h"></div>
      <div class="c-pl100 c-pr10 c-flex-row c-aligni-center c-justify-sb">
        <div class="c-fc-white c-fs26 c-fw600"> {{guideText}} </div>
        <div class="c-fc-white c-fs20">立即加入<span class="c-fc-white iconfont c-pl4 c-fs16">&#xe60e;</span></div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'InviteGroup',
  props: {
    guideText: {
      type: String,
      default: '',
    }
  },
  computed: {},
  data() {
    return {
      showBackTop: false,
    }
  },

  methods: {
    handleShowGuidePop() {
      this.$emit('handleShowGuidePop')
    }
  },
  mounted() {
  },
  destroyed() {
  }
}
</script>

<style scoped>
.invite-group-bg {
  background-image: url("../../../assets/i/wap/course/invite-group.png");
  background-size: 100% 100%;
}
.fans-light-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
}
.fans-light-box::after {
    content: '';
    position: absolute;
    left: -50%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
    transform: rotateZ(60deg);
    animation: sheen 2s 1s infinite;
}
@keyframes sheen {
    to {
        transform: rotateZ(60deg) translate(1em, -30em);
    }
}
.fans-group-star1 {
    animation: hideOpacity 1.2s 1s linear infinite;
}
.fans-group-star2 {
    animation: hideOpacity 1.2s 0.5s linear infinite;
}
.fans-group-star3 {
    animation: hideOpacity 1.2s 0.3s linear infinite;
}
.fans-group-star4 {
    animation: hideOpacity 1.2s 0.8s linear infinite;
}
@keyframes hideOpacity {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>
